<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'IForm',
  data() {
    return {
      fields: [] //用来存储所有的formItem的数组
    }
  },
  props: {
    model: { type: Object }, //存储每个formItem发来的prop
    rules: { type: Object } //存在各种rules的明细
  },
  provide() {/**选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作*/
    return {
      form: this
    }
  },
  /**组件创建时*/
  created() {

    /**接收事件总线的form-add方法*/
    this.$on('form-add', field => {
      if (field) this.fields.push(field); //把子组件加入到fields数组中,实现该组件能够管理多个 子组件
    });

    /**接收事件总线的form-remove方法*/
    this.$on('form-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    });

  },

  methods: {

    /**调用重置方法*/
    resetFields() {
      this.fields.forEach(field => field.resetField()) //重置所有的formItem
    },

    /**遍历每个验证的方法
     * 即表单的验证,此方法决定表单输入是否合法,用这个方法的返回值决定表单的下一步操作*/
    validate(cb) {
      return new Promise(resolve => {
        let valid = true, count = 0;
        this.fields.forEach(field => {
          field.validate('', error => {
            if (error) valid = false;
            if (++count === this.fields.length) {
              resolve(valid);
              if (typeof cb === 'function') cb(valid);
            }
          })
        })
      })
    }

  },

}
</script>
